import { Card, Form, Input, Checkbox, Button, message } from "antd";
import "./index.scss";
import { useNavigate } from "react-router-dom";
import logo from "../../assets/logo192.png";
import { useStore } from "../../store";
function Login() {
  const { LoginStore } = useStore();
  const navigate = useNavigate();
  const onFinish = async (values) => {
    console.log("Success:", values);
    await LoginStore.getToken({
      mobile: values.username,
      code: values.password,
    });
    // 登陆成功  跳转至首页
    setTimeout(() => {
      message.success("登陆成功!");
      navigate("/");
    }, 500);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div>
      <h1>
        <Card className="card">
          <img src={logo} alt="" />
          <Form
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            className="form"
          >
            <Form.Item
              label="手机号"
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入手机号!",
                },
                {
                  pattern:
                    /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
                  message: "手机号格式不正确",
                },
              ]}
              className="item"
            >
              <Input placeholder="请输入手机号" type="text" />
            </Form.Item>
            <Form.Item
              label="密&nbsp;&nbsp;&nbsp;&nbsp;码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入密码!",
                },
              ]}
              className="item"
            >
              <Input.Password placeholder="请输入密码" type="text" />
            </Form.Item>
            <Form.Item>
              <Checkbox className="checkbox">
                我已阅读并同意[用户协议]和[隐私条款]
              </Checkbox>
            </Form.Item>
            <Form.Item>
              <Button
                className="button"
                htmlType="submit"
                size="large"
                type="primary"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </h1>
    </div>
  );
}

export default Login;
